<template>
	<view class="home layout pageBg">
		<custom-nav-bar title="推荐"></custom-nav-bar>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper class="swiper" circular indicator-dots :indicator-color="swiper-ball-color"
				:indicator-active-color="swiper-ball-active-color" autoplay>
				<swiper-item class="swiper-item" v-for="item in bannerList" :key="item._id">
					<image :src="item.picurl" mode="aspectFit" @click="goClassList(item)" />
				</swiper-item>
			</swiper>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<view class="left">
				<uni-icons color="" type="chat" size="18"></uni-icons>
				<text class="text">公告</text>
			</view>
			<swiper class="center" vertical="true" autoplay interval="1500" duration="300" circular>
				<swiper-item v-for="item in noticeList" :key="item._id"
					@click="goNotice(item._id)">{{item.title}}</swiper-item>
			</swiper>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>
		<!-- 每日推荐模块 -->
		<view class="select">
			<!-- 模块标题 -->
			<common-title>
				<template #name>每日推荐</template> <!-- 调用具名插槽 -->
				<template #custom>
					<uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
					<uni-dateformat class="date" :date="Date.now()" format="dd日"></uni-dateformat>
				</template>
			</common-title>
			<scroll-view class="scroll-view" scroll-x>
				<view class="box" v-for="item in specialList" :key="item._id" @click="goPreview(item._id)">
					<image :src="item.smallPicurl" mode="aspectFill"></image>
				</view>
			</scroll-view>
		</view>
		<!-- 专题精选模块 -->
		<view class="theme">
			<!-- 模块标题 -->
			<common-title>
				<template #name>专题精选</template>
				<template #custom>
					<navigator class="more" url="/pages/classify/classify" open-type="reLaunch">More+</navigator>
				</template>
			</common-title>
			<view class="content">
				<theme-item v-for="item in classifyList" :key="item._id" :item="item"></theme-item>
				<theme-item :isMore="true"></theme-item>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import api from '../../api/api.js';
	import {
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	//公告显示列表 
	const noticeList = ref([]);
	//海报列表
	const bannerList = ref([]);
	//每日推荐列表
	const specialList = ref([]);
	//分类列表
	const classifyList = ref([]);
	//跳转预览
	const goPreview = (id) => {
		uni.setStorageSync('storgClassList', specialList.value);
		uni.navigateTo({
			url: "/pages/preview/preview?id=" + id
		});

	};
	//跳转公告
	const goNotice = id => uni.navigateTo({
		url: '/pages/notice/detail?id=' + id
	});
	//通过公告跳转列表
	const goClassList = item => {
		if (item.target == 'miniProgram') {
			uni.navigateToMiniProgram({
				appId:item.appid
			})
		} else {
			uni.navigateTo({
				url: '/pages/classlist/classlist?class' + item.url,
			});
		}

	}
	//获取公告列表
	api.wallNewsList().then(resp => {
		noticeList.value = resp.data.data;
	});
	//获取海报列表
	api.getBanner().then(resp => {
		bannerList.value = resp.data.data;
	});
	//获取每日推荐
	api.getRandomWall().then(resp => {
		specialList.value = resp.data.data;
	});
	//获取分类列表
	api.getClassify({
		select: true
	}).then(resp => {
		classifyList.value = resp.data.data;
	});
	//分享给好友
	onShareAppMessage(e => {
		return {
			title: "郝子的小壁纸",
			path: '/pages/index/index'
		}
	});
	//分享朋友圈
	onShareTimeline(() => {
		return {
			title: '郝子的壁纸',
			imageUrl: '/static/classify2.jpg'
		}
	});
</script>
<style lang="scss" scoped>
	.home {
		// width: 100%;
		padding: 10rpx 30rpx 50rpx 30rpx;
		box-sizing: border-box;

		.banner {
			width: 100%;
			padding: 10rpx 0;

			/* 上右下左-> 上下左右 */
			swiper {
				width: 100%;
				height: 340rpx;

				&-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 25rpx;
					}
				}
			}
		}

		.notice {
			display: flex;
			border-radius: 25rpx;
			background-color: $notice-background-color;
			line-height: 80rpx;

			.left {
				width: 25%;
				display: flex;
				justify-content: center;
				align-items: center;

				//调整图标
				:deep() {
					.uni-icons {
						color: $brand-theme-color;
					}
				}

				.text {
					color: #28b389;
					font-weight: 600; //设置字体粗细
					font-size: 28rpx;
					// 考虑当文字特别多的情况下
					overflow: hidden; //隐藏多余文字
					white-space: nowrap; //不换行
					text-overflow: ellipsis; //显示不完使用... 来表示
				}
			}

			.center {
				width: 65%;
				height: 80rpx;
				line-height: 80rpx;
			}

			.right {
				width: 10%;

			}
		}

		.select {
			padding: 50rpx 0rpx;

			.date {
				color: #28b389;
			}

			.scroll-view {
				margin-top: 20rpx;
				width: 720rpx;
				white-space: nowrap; //不换行

				.box {
					width: 200rpx;
					height: 430rpx;
					display: inline-block; //注 scroll-view 不支持使用flex布局
					margin-right: 15rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}

				}

				// 伪类选择器
				.box:last-child {
					margin-right: 30rpx;
				}
			}
		}

		.theme {
			.more {
				font-size: 32rpx;
				color: #888;
			}

			.content {
				margin: 30rpx 0 0 0;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 15rpx;
			}
		}
	}
</style>